<template>
<div>
  <div class="card" v-for="val in info" :key="val.use_id">
    <div class="message">
      <img :src="`http://localhost:3000${val.ues.head}`" alt />
      <div class="nameInfo">
        <p>{{val.ues.name}}</p>
        <span>{{val.data.time}}</span>
      </div>
    </div>
    <div class="content">
        <p>{{val.data.content}}</p>
        <img :src="`http://localhost:3000${val.data.imgUrl}`" alt="">
    </div>
  </div>
</div>  
</template>

<script>
export default {
  name: "card",
  props:['info'],
  mounted(){
      
  }
};
</script>

<style lang="less" scoped>
.card {
    padding:0.5rem 0;
    border-bottom:1px solid #c3c1c1;
  .message {
      display: flex;
      align-items:center;
    img {
      width: 3rem;
      height: 3rem;
      border: 2px solid #c3c1c1;
      border-radius: 50%;
      
    }
    .nameInfo{
        margin-left: 0.5rem;
        vertical-align:middle;
    }
  }
  .content{
      letter-spacing: 0.2rem;
      margin-top:0.2rem ;
      img{
          width: 100%;
      }
  }
}
</style>